<template>
  <view class="tab-bar">
    <view
      v-for="(item,index) in list"
      :key="item.pagePath"
      class="tab-item"
      :class="{ active: current === item.pagePath }"
      @click="switchTab(item)"
    >
      <image
	  class="icon"
        :src="current === item.pagePath ? item.selectedIconPath : item.iconPath"
		:style="{width:index==1?'100rpx':'60rpx'}"
		mode="widthFix"
      />
      <text>{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: { current: String },          // 当前高亮路径
  data() {
    return {
      list: [
        {
          pagePath: '/pages/index/index',
          text: '首页',
          iconPath: '/static/images/nbar1.png',
          selectedIconPath: '/static/images/bar1.png'
        },
        {
          pagePath: '/pages/mess/index',
          text: '咨询',
          iconPath: '/static/images/bar2.png',
          selectedIconPath: '/static/images/bar2.png'
        },
        {
          pagePath: '/pages/user/index',
          text: '我的',
          iconPath: '/static/images/nbar3.png',
          selectedIconPath: '/static/images/bar3.png'
        }
      ]
    };
  },
  methods: {
    switchTab(item) {
      if (this.current !== item.pagePath) {
        uni.switchTab({ url: item.pagePath });
      }
    }
  }
};
</script>

<style scoped>
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 140rpx;
  background: #fff;
  display: flex;
  align-items: flex-end;
  border-top: 1rpx solid #eee;
  padding: 10rpx 0;
  z-index: 9999;
}
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 20rpx;
  color: #B6B9BF;
}
.tab-item.active {
  color: #573D22;
}
.icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 3px;
}
</style>